<template>
    <view class="container">
        <view class="title">纵向滚动（scroll）示例：</view>
        <scroll-view class="vertical-scroll" scroll-y="true">
            <view class="scroll-item" v-for="item in verticalItems" :key="item">
                纵向滚动项目 {{ item }}
            </view>
        </scroll-view>

        <view class="title">横向滚动（scroll）示例：</view>
        <scroll-view class="horizontal-scroll" scroll-x="true">
            <view class="horizontal-item" v-for="item in horizontalItems" :key="item">
                横向项目 {{ item }}
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                verticalItems: 15,
                horizontalItems: 10
            }
        },
        methods: {
            
        }
    }
</script>

<style>
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
}

.title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0 20rpx 0;
    color: #333;
}

/* 纵向滚动样式 */
.vertical-scroll {
    height: 400rpx;
    background-color: #fff;
    border: 2rpx solid #ddd;
    border-radius: 10rpx;
    padding: 20rpx;
}

.scroll-item {
    height: 80rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
    background-color: #e3f2fd;
    border-radius: 8rpx;
    text-align: center;
    color: #1976d2;
    font-size: 28rpx;
}

.scroll-item:nth-child(even) {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

/* 横向滚动样式 */
.horizontal-scroll {
    white-space: nowrap;
    height: 150rpx;
    background-color: #fff;
    border: 2rpx solid #ddd;
    border-radius: 10rpx;
    padding: 20rpx;
}

.horizontal-item {
    display: inline-block;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin-right: 20rpx;
    background-color: #e8f5e8;
    border-radius: 8rpx;
    text-align: center;
    color: #388e3c;
    font-size: 26rpx;
}

.horizontal-item:nth-child(even) {
    background-color: #fff3e0;
    color: #f57c00;
}
</style>